<!DOCTYPE html>
<html>
  <head>
    <title>Album</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="Generator" content="Nokia WDE 3.2.0" />
    <script src="lib/flickr-webapp.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="default.css"/>
</head>
<body style="background-color:#000000;">
	<div id="toolbar">
		<table cellspacing="0" cellpadding="0" summary="Toolbar Table">
		  <tr>
		    <td>
		      <div id="toolbar-viewport">
		        <div id="toolbar-container" class="toolbar-logo">
		          <img src="img/photoalbum_logo.png" height="48" width="192" alt="Album"><span id="searchbox" class="hidden"><img src="img/photoalbum_go.png" height="48" width="48" alt="Album"><input size="15" id="search-input" type="text" style="width: 120px"></span>
		        </div>
		      </div>
		    </td>
		    <td>
		      <div id="search-button">
		        <div id="input" class="visible"><a onclick="mwl.switchClass('#searchbox', 'hidden', 'visibleinline');mwl.switchClass('#toolbar-container','toolbar-logo','toolbar-search');mwl.setGroupTarget('#search-button','#search','visible','hidden');"><img src="img/magnifying_glass.png" alt="Search"></a></div>
		        <div id="search" class="hidden"><a onclick="mwl.setGroupTarget('#search-button','#input','visible','hidden');flickr_webapp.search()"><img src="img/magnifying_glass.png" alt="Search"></a></div>
		        <div id="grid" class="hidden"><a onclick="mwl.setGroupTarget('#search-button','#search','visible','hidden');mwl.switchClass('#toolbar-container','toolbar-zoom','toolbar-search');mwl.setGroupTarget('#content', '#grids', 'visible', 'hidden');"><img src="img/grid_view.png" alt="Grid View"></a></div>
		      </div>
		    <td>
		  </tr>
		</table>
	</div>
	<div id="content">
	  <div id="splash" class="visible big-pic"><div id="title-bar">Explore</div></div>
	  <div id="grids" class="hidden">
	    <div id="grid-container"></div>
	  </div>
	  <div id="zoom" class="hidden">
	    <div id="arrow-button">
	      <span id="set1" class="hidden"><a onclick="flickr_webapp.slideLeft();"><img width="118" height="26" src="img/left_arrow.png" alt="Left"></a><a onclick="mwl.setGroupTarget('#arrow-button','#set2','visible','hidden');mwl.switchClass('#zoom-container','zoom1','zoom2');"><img width="118" height="26" src="img/right_arrow.png" alt="Right"></a></span>
	      <span id="set2" class="visible"><a onclick="mwl.setGroupTarget('#arrow-button','#set1','visible','hidden');mwl.switchClass('#zoom-container','zoom2','zoom1');"><img width="118" height="26" src="img/left_arrow.png" alt="Left"></a><a onclick="mwl.setGroupTarget('#arrow-button','#set3','visible','hidden');mwl.switchClass('#zoom-container','zoom2','zoom3');"><img width="118" height="26" src="img/right_arrow.png" alt="Right"/></a></span>
	      <span id="set3" class="hidden"><a onclick="mwl.setGroupTarget('#arrow-button','#set2','visible','hidden');mwl.switchClass('#zoom-container','zoom3','zoom2');"><img width="118" height="26" src="img/left_arrow.png" alt="Left"></a><a onclick="flickr_webapp.slideRight();"><img width="118" height="26" src="img/right_arrow.png" alt="Right"/></a></span>
	   </div>
	    <div id="zoom-viewport">
	      <div id="zoom-container" class="zoom2">
	        
	      </div>
	    </div>
	  </div>
	</div>
</body>
</html>